<template>
	<view class="nav" :style="{height: navheight}">
		<view class="nav-title">
			<view class="logo">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
					@confirm="confirm" />
			</view>
		</view>
	</view>
	<view class="content">
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="2000" indicator-active-color="#ff0"
				:duration="1000" :circular="true">
				<swiper-item v-for="sw in banner" :key="sw.id">
					<image :src="sw.pic" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="good-nav">
			<view>
				<icon class="iconfont icon-tupianshuxing" />
				<text>作品分类</text>
			</view>
			<view>
				<icon class="iconfont icon-jiangbei" />
				<text>作品排行</text>
			</view>
			<view>
				<icon class="iconfont icon-rili1" />
				<text>短片网文</text>
			</view>
			<view>
				<icon class="iconfont icon-shangcheng" />
				<text>周边商城</text>
			</view>
		</view>

		<view class="">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="content">
				<view v-if="current === 0">
					<uni-grid :column="3" :showBorder="false">
						<uni-grid-item class="grid-item" v-for="cxb in cxbang" :key="cxb.id"
						>
							<view class="goods-card" @click="details(cxb.id)">
								<view class="goods-mainpic">
									<image class="goods-image" :src="cxb.Image"></image>
									<view class="goods-sort">{{cxb.sort}}</view>
									<view class="goods-tag"><van-tag color="#ffe1e1" text-color="#ad0000">{{cxb.id}}</van-tag></view>
								</view>
								<view class="goods-name">{{cxb.name}}</view>
								<view class="goods-rank">{{cxb.rank}}</view>
							</view>
						</uni-grid-item>
					</uni-grid>
					<button>全部榜单</button>
				</view>
				<view v-if="current === 1">
					<uni-grid :column="3" :showBorder="false">
						<uni-grid-item class="grid-item" v-for="rmb in rmbang" :key="rmb.id">
							<view class="goods-card" @click="details2(rmb.id)">
								<view class="goods-mainpic">
									<image class="goods-image" :src="rmb.Image"></image>
									<view class="goods-sort">{{rmb.sort}}</view>
									<view class="goods-tag"><van-tag color="#ffe1e1" text-color="#ad0000">{{rmb.id}}</van-tag></view>
								</view>
								<view class="goods-name">{{rmb.name}}</view>
								<view class="goods-rank">{{rmb.rank}}</view>
							</view>
						</uni-grid-item>
					</uni-grid>
					<button>全部榜单</button>
				</view>
				<view v-if="current === 2">
					<uni-grid :column="3" :showBorder="false">
						<uni-grid-item class="grid-item" v-for="hm in hmbang" :key="hm.id">
							<view class="goods-card" @click="details3(hm.id)">
								<view class="goods-mainpic">
									<image class="goods-image" :src="hm.Image"></image>
									<view class="goods-sort">{{hm.sort}}</view>
									<view class="goods-tag"><van-tag color="#ffe1e1" text-color="#ad0000">{{hm.id}}</van-tag></view>
								</view>
								<view class="goods-name">{{hm.name}}</view>
								<view class="goods-rank">{{hm.rank}}</view>
							</view>
						</uni-grid-item>
					</uni-grid>
					<button>全部榜单</button>
				</view>
			</view>
		</view>
		<view class="good-rqjz">
		     <view class="good-rqjz-name">人气佳作</view>
		      <uni-grid :column="3" :showBorder="false">
		      	<uni-grid-item class="grid-item" v-for="jz in jiazuo" :key="jz.id">
		      		<view class="goods-card" @click="details4(jz.id)">
		      			<view class="goods-mainpic">
		      				<image class="goods-image" :src="jz.Image"></image>
		      				<view class="goods-sort">{{jz.sort}}</view>
		      				<view class="goods-tag"></view>
		      			</view>
		      			<view class="goods-name">{{jz.name}}</view>
		      			<view class="goods-rank">{{jz.rank}}</view>
		      		</view>
		      	</uni-grid-item>
		      </uni-grid>
		      <view class="good-rqjz-button">
		     <button>查看更多</button><button @click="huangbn">换一换</button>
		      </view>
		    </view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				cxbang: [],
				rmbang: [],
				hmbang:[],
				jiazuo:[],
				items: ['畅销榜', '日漫榜', '韩漫榜'],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#ffed20',
				styleType: 'text',
				navheight: 0,
				randomInt:1
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (e) => {
					this.navheight = `${e.statusBarHeight+36}px`
				},
				fail(er) {
					console.log(er)
				}
			})
			uni.request({
				url: "http://localhost:3000/banner",
			}).then((res) => {
				this.banner = res.data
			})
			uni.request({
				url: "http://localhost:3000/tab",
				data:{
					"page":1
				}
			}).then((res) => {
				this.cxbang = res.data[0].data
			})
			uni.request({
				url: "http://localhost:3000/tab",
				data:{
					"page":2,

				},
			}).then((res) => {
				this.rmbang = res.data[0].data
				console.log(res.data[0].data)
			})
			uni.request({
				url: "http://localhost:3000/tab",
				data:{
					"page":3
				}
			}).then((res) => {
				this.hmbang = res.data[0].data
			})
			uni.request({
				url: "http://localhost:3000/tab",
				data:{
					"page":1
				}
			}).then((res) => {
				this.jiazuo = res.data[0].data
			})
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			details(e){
				// console.log(e)
				uni.navigateTo({
					url:`/pages/details/details?id=${e}&page=${1}`,
				})
			},
			details2(e){
				// console.log(e)
				uni.navigateTo({
					url:`/pages/details/details?id=${e}&page=${2}`,
				})
			},
			details3(e){
				// console.log(e)
				uni.navigateTo({
					url:`/pages/details/details?id=${e}&page=${3}`,
				})
			},
			details4(e){
				// console.log(e)
				uni.navigateTo({
					url:`/pages/details/details?id=${e}&page=${this.randomInt}`,
				})
			},
			getRandomInt(min, max) {
			      min = Math.ceil(min);
			      max = Math.floor(max);
			      return Math.floor(Math.random() * (max - min + 1)) + min;
			    },
			huangbn(){
				this.randomInt = this.getRandomInt(1, 3);
					uni.request({
					url: "http://localhost:3000/tab",
					data:{
						"page":this.randomInt
					}
				}).then((res) => {
					this.jiazuo = res.data[0].data
				})
			}
		}
	}
</script>

<style>
	@import"/static/icon.wxss";

	.nav {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 6;
	}
	.nav-title {
		display: flex;
		margin-top: 22px;
	}

	.input-view {
		display: flex;
		flex-direction: row;
		width: 400rpx;
		background-color: #f8f8f8;
		height: 33px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		
		line-height: 33px;
	}

	.input-uni-icon {
		line-height: 33px;
	}

	.nav-bar-input {
		height: 33px;
		line-height: 33px;
		width: 300rpx;
		border-radius: 15px;
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
	.logo{
		margin: 0 20rpx;
	}
	.logo image {
		height: 65rpx;
		width: 65rpx;
	}

	.banner {
		margin-top: 60px;
		width: 100%;
	}

	.banner image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.good-nav {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		margin-top: 12rpx;
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
	}

	.good-nav image {
		width: 80rpx;
		height: 80rpx;
	}

	.good-nav .iconfont {
		font-size: 65rpx;
	}

	.good-nav text {
		margin-top: 16rpx;
		font-size: 24rpx;
	}

	.good-nav>view {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.grid-item {
		width: 33%;
	}
	.goods-card {
		width: 90%;
		height: 100%;
		margin: 10rpx;
		box-sizing: border-box;
		border: 1px solid #eee;
		box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.08);
		border-radius: 10rpx;
		background-color: rgba(0, 0, 0, 0);
		overflow: hidden;
		float: left;
	}

	.goods-mainpic {
		position: relative;
		width: 100%;
		height: 66%;
	}

	.goods-sort {
		font-size: 20rpx;
		color: #eee;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.goods-tag {
		position: absolute;
		top: 0;
		left: 0;
	}

	.goods-image {
		width: 100%;
		height: 100%;
	}

	.goods-name {

		width: 150rpx;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		word-break: break-all;
		font-size: 28rpx;
		/* overflow: scroll; */
		color: #000;
	}

	.goods-rank {
		padding: 0px 10rpx;
		font-size: 25rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: wrap;
		/* 将对象作为弹性伸缩盒子模型显示。 */
		display: -webkit-box;
		color: #777;
		/* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
		-webkit-box-orient: vertical;
		/* 这个属性不是 css 的规范属性，需要组合上面两个属性，表示显示的行
	    数。 */
		-webkit-line-clamp: 2;
	}
	.good-rqjz-button button{
	  margin: 0 20rpx;
	  float: left;
	  width: 330rpx;
	}
</style>